<template>
  <div id="add-blog">
      <h2>添加博客</h2>
      <form v-if="!submmited">
          <label>博客标题</label>
          <input type="text" v-model="blog.title" required/>
          <br><br>
          <label>博客内容</label>
          <textarea name="" id="" cols="5" rows="10" v-model="blog.content"></textarea>
        <div id="checkboxes">
            <label>Vue.js</label>
            <input type="checkbox" value="Vue.js" v-model="blog.categories">
            <label>Node.js</label>
            <input type="checkbox" value="Node.js" v-model="blog.categories">
            <label>Angular4</label>
            <input type="checkbox" value="Angular4" v-model="blog.categories">
        </div>
        <label >作者:</label>
        <select name="" id="" v-model="blog.author">
            <option value="" v-for="author in authors" :value="author">{{author}}</option>
        </select>
               <!-- prevent 阻止刷新页面 -->
          <button @click.prevent="post">添加博客</button>
      </form>
      <div v-if="submmited"><h3>博客发布成功</h3></div>
      <div id="preview">
          <h3>博客总览</h3>
          <p>博客标题:{{blog.title}}</p>
          <p>博客内容:</p>
          <p class="blog-content">{{blog.content}}</p>
          <p>博客分类</p>
          <!-- 分类可能有多个所以需要遍历 -->
          <ul>
            <li v-for="category in blog.categories" :key="category">
                  {{category}}
            </li>
          </ul>
          <p>作者:{{blog.author}}</p>
   
      </div>
  </div>
</template>

<script>
export default {
  name: 'AddBlog',
  data () {
    return {
        blog:{
            title:'',
            content:'',
            categories:[],
            author:''
        },
        authors:['Carrie','Lucy'],
        submmited:false,//控制from表单显示与隐藏
    }
  },
  created(){
  
  },
  methods:{
    post(){
        let params = {
            title:this.blog.title,
            body:this.blog.content,
            userId:1
            // categories:this.blog.categories,
            // author:this.blog.author
        }
        // 提交的地址是网络上免费的地址
        // http://jsonplaceholder.typicode.com/posts
        this.$axios.post('https://wd4254457889oggbip.wilddogio.com/posts.json',this.blog)
        .then(data =>{
            console.log(data)
            this.submmited = true;//点击添加博客的时候隐藏from
        })
    } 
  }
}
</script>
<style scoped>
#add-blog *{
    box-sizing: border-box;
}
#add-blog{
    margin: 20px auto;
    max-width: 600px;
    padding: 20px;
}
label{
    display: block;
    margin: 20px 0 10px;
}
input[type="text"],textarea,select{
    display: block;
    width: 100%;
    padding: 8px;
}
#checkboxes label{
    display: inline-block;
    margin-top: 0;
}
#checkboxes input{
    display: inline-block;
    margin-right: 10px;
}
button{
    display: block;
    margin: 20px 0;
    background-color: crimson;
    color: #fff;
    border: 0;
    padding: 14px;
    border-radius: 4px;
    font-size: 18px;
    cursor: pointer;
}
#preview{
    padding: 10px 20px;
    border: 1px dotted #ccc;
    margin: 30px 0;
}
.blog-content{
    /* width: 100%; */
    /* 自动换行 */
    word-break: break-all;
}
h3{
    margin-top: 10px;
}
</style>
